<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>全部商品</title>
    <link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/search.css">
    <link rel="stylesheet" href="css/header.css">
    <link rel="stylesheet" href="css/banner1.css">
    <link rel="stylesheet" href="./css/shop.css">
    <script src="js/jquery-3.7.1.min.js"></script>
</head>
<body>
<header>
    <img src="./images/img.png" alt="">
    <div class="search-box">
        <label>
            <input type="text" class="search-txt" placeholder="想搜啥?" oninput="showSuggestions(this.value)" />
        </label>
        <a class="search-btn">
            <i class="fa fa-search" aria-hidden="true"></i>
        </a>
        <div class="suggestions" id="suggestions"></div>
    </div>
    <ul>
        <li><a href="index.html">秒杀首页</a></li>
        <li><a href="seckiling.html">秒杀专区</a></li>
        <li><a href="javascript:location.reload()">全部商品</a></li>
        <li><a href="customer.html">联系客服</a></li>
        <li><a href="user.html">个人中心</a></li>
        <li><a href="login.html" id="user">登录|注册</a></li>
    </ul>
</header>
<section class="banner3">
    <div class="shop">
        <div class ="topTitle">
            <h1>全部商品</h1>
        </div>
        <div class="categories">
            <ul>
                <li><a href="#" class="category-link" data-id="1">家电</a></li>
                <li><a href="#" class="category-link" data-id="2">数码</a></li>
                <li><a href="#" class="category-link" data-id="3">文具</a></li>
                <li><a href="#" class="category-link" data-id="4">箱包</a></li>
                <li><a href="#" class="category-link" data-id="5">服饰</a></li>
                <li><a href="#" class="category-link" data-id="6">运动</a></li>
            </ul>
        </div>
        <div class="banner2-box">
        </div>
    </div>
</section>
<script src="./js/shop.js"></script>
<script src="./js/show.js"></script>
<script src="./js/search.js"></script>
<script>
    // 鼠标滚轮滚动事件
    window.addEventListener("scroll",()=>{
        let header=document.querySelector("header");
        header.classList.toggle("sticky",window.scrollY>0);
    })
</script>
</body>
</html>